<template>
  <div class="app-container">
    <div class="filter-container">
      <p style="float:left;margin-top:5px;margin-left:2%">楼层标题：</p>
      <el-input
        v-model="listQuery.title"
        size="small"
        placeholder="请输入楼层标题"
        style="width: 200px;float:left"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <p style="float:left;margin-top:5px;margin-left:2%">楼层活动说明：</p>
      <el-input
        v-model="listQuery.des"
        size="small"
        placeholder="请输入楼层活动说明"
        style="width: 200px;float:left"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        size="small"
        class="filter-item"
        type="success"
        icon="el-icon-search"
        style="margin-left:3%"
        @click="handleFilter"
      >搜索</el-button>

      <el-button
        size="small"
        class="filter-item"
        style="margin-left: 10px;float:right"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >添加</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      size="small"
      border
      fit
      highlight-current-row
      style="width: 100%;margin-top:1%"
    >
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="主标题" min-width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="副标题" min-width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.subTitle }}</span>
        </template>
      </el-table-column>

      <el-table-column label="楼层活动说明" min-width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.des }}</span>
        </template>
      </el-table-column>

      <el-table-column label="楼层示例图" min-width="200px" align="center">
        <template slot-scope="scope">
          <img
            v-if="scope.row.floorStyle=='1'"
            src="../../../../assets/img/app/floor1.png"
            style="width: 200px;height: 100px;"
          />
          <img
            v-else-if="scope.row.floorStyle=='2'"
            src="../../../../assets/img/app/floor2.png"
            style="width: 200px;height: 80px;"
          />
          <img
            v-else-if="scope.row.floorStyle=='3'"
            src="../../../../assets/img/app/floor3.png"
            style="width: 200px;height: 80px;"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        min-width="200px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button size="small" align="center" type="primary" @click="handleUpdate(row)">编辑</el-button>
          <el-button size="small" align="center" type="primary" @click="handleDel(row)">删除</el-button>
          <el-button size="small" align="center" type="primary" @click="addFloorDataModel(row)">设置内容</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    <!-- 添加楼层数据 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      append-to-body
    >
      <el-form ref="dataForm" :model="temp" label-width="250px" label-position="right" style>
        <el-form-item label="楼层主标题：">
          <el-input v-model="temp.title" placeholder="输入楼层主标题" />
        </el-form-item>
        <el-form-item label="楼层副标题:">
          <el-input v-model="temp.subTitle" placeholder="输入楼层副标题" />
        </el-form-item>

        <el-form-item label="楼层样式:">
          <el-select
            size="small"
            placeholder="选择楼层样式"
            clearable
            class="filter-item"
            style
            v-model="temp.floorStyle"
            :disabled="dialogStatus == 'update'"
          >
            <el-option
              v-for="item in statusList"
              :key="item.key"
              :label="item.display_name"
              :value="item.key"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="楼层排序:">
          <el-input v-model="temp.orders" />
        </el-form-item>

        <el-form-item label="楼层跳转页面:">
          <el-select
            size="small"
            placeholder="选择楼层跳转页面"
            clearable
            class="filter-item"
            style
            v-model="temp.jumpTO"
          >
            <el-option v-for="item in inLinkList" :key="item.id" :label="item.k" :value="item.val" />
          </el-select>
        </el-form-item>

        <el-form-item label="实例照片:">
          <p>
            <img
              v-if="temp.floorStyle=='1'"
              src="../../../../assets/img/app/floor1.png"
              style="width: 400px;height: 200px;"
            />
            <img
              v-else-if="temp.floorStyle=='2'"
              src="../../../../assets/img/app/floor2.png"
              style="width: 400px;height: 160px;"
            />
            <img
              v-else-if="temp.floorStyle=='3'"
              src="../../../../assets/img/app/floor3.png"
              style="width: 400px;height: 160px;"
            />
          </p>
        </el-form-item>

        <el-form-item label="楼层活动说明:">
          <el-input placeholder="请填写楼层说明:" v-model="temp.des" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? createData() : updateData()"
        >保存并继续配置内容</el-button>
      </div>
    </el-dialog>

    <!-- 添加楼层内数据 -->
    <el-dialog
      width="60%"
      :close-on-click-modal="false"
      :visible.sync="dialogFormFloor"
      append-to-body
      :before-close="handleClose"
    >
      <el-container>
        <el-aside width="500px">
          <el-row class="mb40">
            <el-col :span="4">示例图片：</el-col>
            <el-col :span="20">
              <img
                v-if="temp.floorStyle=='1'"
                src="../../../../assets/img/app/floor1.png"
                style="width: 100%;height: auto;"
              />
              <img
                v-else-if="temp.floorStyle=='2'"
                src="../../../../assets/img/app/floor2.png"
                style="width: 100%;height: 200px;"
              />
              <img
                v-else-if="temp.floorStyle=='3'"
                src="../../../../assets/img/app/floor3.png"
                style="width: 100%;height: 200px;"
              />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">内容配置：</el-col>
            <el-col :span="20">
              <div class="border">
                <div v-if="temp.floorStyle=='1'" style="height: 100px;">
                  <el-row :gutter="20">
                    <label v-for="(item,index) in floorList" :key="item.floorDataId">
                      <el-col class="div3" :span="6">
                        <div
                          :class="checkFloorDataIndex===index?'check_item':''"
                          @click="clickFloorData(item)"
                          style="border: 1px dashed #CCCCCC; height: 100px;"
                        >
                          <img
                            v-if="item.imgUrl"
                            :src="item.imgUrl"
                            style="width: 100%;height: 100%;"
                          />
                        </div>
                      </el-col>
                    </label>
                  </el-row>
                </div>

                <div v-if="temp.floorStyle=='2'" style="height: 100px;">
                  <el-row :gutter="20">
                    <label v-for="(item,index) in floorList" :key="item.floorDataId">
                      <el-col class="div3" :span="8">
                        <div
                          :class="checkFloorDataIndex===index?'check_item':''"
                          @click="clickFloorData(item)"
                          style="border: 1px dashed #CCCCCC; height: 100px;"
                        >
                          <img
                            v-if="item.imgUrl"
                            :src="item.imgUrl"
                            style="width: 100%;height: 100%;"
                          />
                        </div>
                      </el-col>
                    </label>
                  </el-row>
                </div>

                <div v-if="temp.floorStyle=='3'" style="height: 180px;">
                  <el-row :gutter="20">
                    <label v-for="(item,index) in floorList" :key="item.floorDataId">
                      <div
                        v-if="index<5"
                        class="div3"
                        style="width: 20%; float: left;padding: 0 10px; height: 60px; margin-bottom: 10px;"
                      >
                        <div
                          :class="checkFloorDataIndex===index?'check_item':''"
                          @click="clickFloorData(item)"
                          style="border: 1px dashed #CCCCCC; height: 60px;"
                        >
                          <img
                            v-if="item.imgUrl"
                            :src="item.imgUrl"
                            style="width: 100%;height: 100%;"
                          />
                        </div>
                      </div>
                      <el-col v-if="index>4" class="div3" :span="8">
                        <div
                          :class="checkFloorDataIndex===index?'check_item':''"
                          @click="clickFloorData(item)"
                          style="border: 1px dashed #CCCCCC; height: 100px;"
                        >
                          <img
                            v-if="item.imgUrl"
                            :src="item.imgUrl"
                            style="width: 100%;height: 100%;"
                          />
                        </div>
                      </el-col>
                    </label>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <el-form
            v-if="showFloorData"
            ref="dataForm1"
            :model="checkFloorData"
            label-width="150px"
            label-position="right"
            style
          >
            <el-form-item label="标题：">
              <el-input v-model="checkFloorData.title" placeholder="输入标题" />
            </el-form-item>
            <el-form-item label="上传照片：">
              <el-upload
                class="avatar-uploader"
                action
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :http-request="customRequest"
              >
                <img
                  style="width:100px;height:100px"
                  v-if="checkFloorData.imgUrl"
                  :src="checkFloorData.imgUrl"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>

            <el-form-item label="跳转方式:">
              <el-select
                size="small"
                placeholder="选择跳转方式"
                clearable
                class="filter-item"
                style
                v-model="checkFloorData.jumpLinkMode"
              >
                <el-option
                  v-for="item in calendarTypeOptions"
                  :key="item.key"
                  :label="item.display_name"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="跳转功能页面:" v-if="checkFloorData.jumpLinkMode=='inLink'">
              <el-select
                size="small"
                placeholder="选择跳转页面"
                clearable
                class="filter-item"
                style
                v-model="checkFloorData.jumpTo"
              >
                <el-option
                  v-for="item in inLinkList"
                  :key="item.id"
                  :label="item.k"
                  :value="item.val"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="跳转链接:" v-if="checkFloorData.jumpLinkMode=='outLink'">
              <el-input placeholder="请输入跳转链接" v-model="checkFloorData.linkUrl"></el-input>
            </el-form-item>

            <el-form-item label="商品ID:" v-if="checkFloorData.jumpLinkMode=='propriceId'">
              <el-input style="width:200px" v-model="checkFloorData.proId" />
              <el-button type="primary" style="margin-left:20px;" @click="queryGoods">查询商品</el-button>
            </el-form-item>

            <el-form-item
              label="商品名称:"
              v-if="checkProData.infoName&&checkFloorData.jumpLinkMode=='propriceId'"
            >
              <el-input v-model="checkProData.infoName" disabled />
            </el-form-item>
            <el-form-item
              label="商品规格(不同价格)："
              v-if="checkProData.list&&checkFloorData.jumpLinkMode=='propriceId'"
            >
              <el-table
                :data="checkProData.list"
                tooltip-effect="dark"
                ref="tableData"
                @row-click="singleElection"
                stripe
                border
                style="width:100%"
              >
                <el-table-column label="单选" align="center">
                  <template slot-scope="scope">
                    <el-radio
                      class="radio"
                      v-model="checkPriceId"
                      :label="scope.row.proPriceId"
                    >&nbsp;</el-radio>
                  </template>
                </el-table-column>
                <el-table-column label="型号" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.proTitle}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="销售价格" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.proSellPrice/100}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="采购价格" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.purchansePrice/100}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="市场价格" align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.proMarketPrice/100}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <el-button type="primary" style="float: right;" @click="addFloorData()">提交</el-button>
          </el-form>
        </el-main>
      </el-container>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeFloorData">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 异步请求 delLly
import {
  listFloor,
  addFloor,
  updateFloor, //修改楼层数据
  getInLinkList,
  getFloorData, //获取楼层下的数据
  addFloorData
} from "../../../../api/appApi/headWheelReq.js";
import { queryGoods } from "@/api/activityManage";
import Vue from "vue";
import { addImg } from "@/api/headWheel";
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // 分页插件

const calendarTypeOptions = [
  {
    key: "propriceId",
    display_name: "商品链接"
  },
  {
    key: "inLink",
    display_name: "内部功能链接"
  },
  {
    key: "outLink",
    display_name: "URL链接"
  }
];
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name;
  return acc;
}, {});

export default {
  inject: ["reload"],
  components: {
    Pagination
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger"
      };
      return statusMap[status];
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    }
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        status: "",
        sort: "+id"
      },
      temp: {
        id: undefined
      },
      dialogFormVisible: false, //楼层弹窗
      dialogFormFloor: false, //楼层信息弹窗
      calendarTypeOptions,
      dialogStatus: "", //按钮信息
      textMap: {
        update: "编辑",
        create: "添加"
      },
      statusList: [
        {
          key: "1",
          display_name: "样式一"
        },
        {
          key: "2",
          display_name: "样式二"
        },
        {
          key: "3",
          display_name: "样式三"
        }
      ],
      checkProData: {}, //根据id查询商品信息
      checkPriceIndex: "", //选中规格的index
      inLinkList: [], //功能list
      floorList: [], //楼层下的数据list
      checkFloorData: {}, //选择中的数据
      showFloorData: false,
      checkFloorDataIndex: "",
      checkPriceId: "" //商品规格选中的id
    };
  },
  created() {
    this.getList();
    this.getInLinkList();
  },
  methods: {
    // 上传图片
    handleAvatarSuccess(res, file) {
      this.checkFloorData.imgUrl = URL.createObjectURL(file.raw);
    },
    customRequest(data) {
      const formData = new FormData();
      formData.append("file", data.file);
      this.saveFile(formData);
    },
    saveFile(formData) {
      addImg(formData).then(res => {
        // this.imageUrl=res.data
        this.checkFloorData.imgUrl = res.data.filePath;
        console.log(this.checkFloorData);
      });
    },

    // 获取内部链接list
    getInLinkList() {
      let formdata = {
        type: "inLink"
      };
      getInLinkList(formdata).then(res => {
        console.log("inlink", res.data);
        this.inLinkList = res.data;
      });
    },

    // 获取list
    getList() {
      this.listLoading = true;
      var params = Object.assign({}, this.listQuery);
      params.pageNum = this.listQuery.pageNum - 1;
      // var params = {
      //   // pageConvert: true,
      //   pageNum: this.listQuery.pageNum - 1,
      //   pageSize: this.listQuery.pageSize
      // };
      listFloor(params).then(response => {
        this.list = response.data.content;
        this.total = response.data.totalElements;
        this.listLoading = false;
      });
    },

    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    sortChange(data) {
      const { prop, order } = data;
      if (prop === "id") {
        this.sortByID(order);
      }
    },
    sortByID(order) {
      if (order === "ascending") {
        this.listQuery.sort = "+id";
      } else {
        this.listQuery.sort = "-id";
      }
      this.handleFilter();
    },

    // 初始化temp
    resetTemp() {
      this.temp = {
        id: undefined
      };
      this.checkProData = {};
    },

    // 显示编辑弹窗
    handleUpdate(row) {
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },

    // 添加弹窗展示
    addFloorDataModel(row) {
      this.temp = Object.assign({}, row); // copy obj
      this.dialogFormFloor = true;
      this.getFloorData(row.floorId);
      // this.$nextTick(() => {
      //   this.$refs['dataForm1'].clearValidate()
      // })
    },

    // 根据楼层id获取楼层下的数据
    getFloorData(floorId) {
      var formdata = {
        floorId: floorId
      };
      getFloorData(formdata).then(res => {
        console.log("楼层下的数据", res);
        this.floorList = res.data;
      });
    },

    // 根据商品id查询商品
    queryGoods() {
      this.checkProData = {};
      queryGoods(this.checkFloorData.proId).then(res => {
        console.log(res);
        if (res.code == "200") {
          if (res.data.infoName) {
            this.checkProData = res.data;
          } else {
            this.$notify({
              title: "失败",
              message: "未查到商品",
              type: "danger",
              duration: 2000
            });
          }
        } else {
          this.$notify({
            title: "失败",
            message: res.error_msg,
            type: "danger",
            duration: 2000
          });
        }
      });
    },
    //选择规格
    singleElection(item) {
      console.log(item);
      this.checkFloorData.reletionId = item.proPriceId;
      this.checkFloorData.proInfoId = item.proInfoId;
      this.checkPriceId = item.proPriceId;
    },

    // 点击楼层填写数据
    clickFloorData(item) {
      console.log("----------------");
      console.log(item);
      this.checkFloorDataIndex = this.floorList.indexOf(item);
      this.checkFloorData = item;
      this.showFloorData = true;
      this.checkProData = "";
      if (item.jumpLinkMode == "propriceId") {
        this.queryGoods();
        this.checkPriceId = item.reletionId;
        console.log(this.checkPriceId);
      }
    },

    // 添加楼层下的数据
    addFloorData() {
      console.log("楼层信息", this.checkFloorData);
      addFloorData(this.checkFloorData).then(res => {
        console.log("添加", res);
        if (res.code == "200") {
          this.$notify({
            title: "成功",
            message: "编辑成功",
            type: "success"
          });
          this.checkFloorData = "";
          this.checkPriceId = "";
          this.showFloorData = false;
          this.getFloorData(row.floorId);
        }
      });
    },

    // 关闭弹窗
    handleClose(done) {
      console.log("guanbi ----------");
      this.checkFloorData = "";
      this.showFloorData = false;
      this.checkFloorDataIndex = "";
      this.dialogFormFloor = false;
      done();
    },
    closeFloorData() {
      this.checkFloorData = "";
      this.showFloorData = false;
      this.checkFloorDataIndex = "";
      this.dialogFormFloor = false;
    },

    // 删除
    handleDel(row) {
      this.$confirm("确定删除？ 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(async () => {
          let tempData = Object.assign({}, row);
          tempData.status = "0";
          console.log(tempData);
          updateFloor(tempData).then(result => {
            if (result.code === "200") {
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success"
              });
              this.getList();
            } else {
              this.$notify({
                title: "失败",
                message: res.error_msg,
                type: "danger"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    // 修改
    updateData() {
      const tempData = Object.assign({}, this.temp);
      console.log("bj", tempData);
      updateFloor(tempData).then(res => {
        this.dialogFormVisible = false;
        console.log(res);
        if (res.code == "200") {
          this.$notify({
            title: "成功",
            message: "修改成功",
            type: "success",
            duration: 2000
          });
          this.dialogFormFloor = true;
          
          this.getFloorData(tempData.floorId);
          this.getList();
        } else {
          this.$notify({
            title: "失败",
            message: res.error_msg,
            type: "danger",
            duration: 2000
          });
        }
      });
    },
    // 新增
    handleCreate() {
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    createData() {
      console.log(this.temp);
      addFloor(this.temp).then(res => {
        this.dialogFormVisible = false;
        console.log(res);
        if (res.code == "200") {
          this.$notify({
            title: "成功",
            message: "添加成功",
            type: "success",
            duration: 2000
          });
          this.dialogFormFloor = true;

          this.getFloorData(res.data.floorId);
          this.getList();
        } else {
          this.$notify({
            title: "失败",
            message: res.error_msg,
            type: "danger",
            duration: 2000
          });
        }
      });
    },

    getSortClass: function(key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}`
        ? "ascending"
        : sort === `-${key}`
        ? "descending"
        : "";
    }
  }
};
</script>
<style scoped>
div {
  box-sizing: border-box;
}

.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.mb40 {
  margin-bottom: 40px;
}

.border {
  border: 1px solid #000000;
  padding: 20px;
  overflow: auto;
  z-index: -2;
}

.check_item {
  box-shadow: 0 0 8px skyblue;
  -webkit-box-shadow: 0 0 8px skyblue;
}
</style>
